;(function($) {
    $.fn.WJplayer = function(options) {
         function init() {
        var videoW = options.videoW;
        var videoH = options.videoH;
        var videoSrc = options.videoSrc;
        var videoHtml = '';
        videoHtml += '<div class="pure-g"><div class="pure-u-1"><div class="player">';
        //videoHtml+='<video id="player" width='"+videoW+"'height="'+videoH+'">您的浏览器不支持HTML5';
        videoHtml += '<video id="player" width="' + videoW + '" height="' + videoH + '">';
        videoHtml += '<source src="' + videoSrc + '"></video><div class="pure-g" id="controller">';
        videoHtml += '<div class="pure-u-1-12"><span id="play" class="icon icon-play"></span>';
        videoHtml += '<span id="stop" class="icon icon-stop"></span></div>';
        videoHtml += '<div class="pure-u-13-24 overflow-h"><div id="progressBar" class="controlBar"><div id="innerBar" class="controlInner"></div></div></div>';
        videoHtml += '<div class="pure-u-1-4"><span id="timer">0:00</span><span id="volume" class="icon icon-volume"></span><div id="volume-control" class="controlBar"><div id="volume-inner" class="controlInner"></div></div></div>';
        videoHtml += '<div class="pure-u-1-8 overflow-h"><span id="expand" class="icon icon-expand"></span>';
        videoHtml+='<select id="speed"><option value ="1.0">正常</option><option value="1.5">1.5倍</option><option value="2.0">2倍</option></select></div>';
        videoHtml += '</div></div></div></div>';
        $("#video-container").html(videoHtml);
    };
    init();
    var $player = $('#player')
      , //视频对象
    $play = $('#play')
      , //控制播放按钮
    $stop = $('#stop')
      , //暂停按钮
    $volume = $('#volume')
      , //声音控制按钮
    $expand = $('#expand')
      , //全屏播放
    $upload = $('#upload'),
    //上传播放
    $speed=$('#speed');//播放速度


    var player = $player[0];

    var $file = $('#file')
      , $timer = $('#timer');
    var $progressBar = $('#progressBar')
      , $innerBar = $('#innerBar')
      , $volumeControl = $('#volume-control')
      , $volumeInner = $('#volume-inner');
     var speedVal;

    $speed.on('change',speedChange);

    function speedChange(){
    	speedVal=$(this).val();
    	player.playbackRate=speedVal;
    }
    $play.on('click', play);

    function play() {
        if (player.paused) {
            player.play();
            $(this).removeClass('icon-play').addClass('icon-pause');
        } else {
            player.pause();
            currentTime(player);
            $(this).removeClass('icon-pause').addClass('icon-play');
        }
    }

    $stop.on('click', stop);

    function stop() {
        player.currentTime = 0;
        $innerBar.css('width', 0 + 'px');
    }

    $volume.on('click', volumeMuted);

    function volumeMuted() {
        if (player.muted) {
            player.muted = false;
            $(this).removeClass('icon-volume-mute').addClass('icon-volume');
            $volumeInner.css('width', 100 + '%');
        } else {
            player.muted = true;
            $(this).removeClass('icon-volume').addClass('icon-volume-mute');
            $volumeInner.css('width', 0);
        }
    }

    $expand.on('click', expandControl);
    //全屏播放
    function expandControl() {
    	console.log( document.webkitCancelFullScreen);
        if (!document.webkitIsFullScreen) {
            player.webkitRequestFullScreen();
            //全屏
            $(this).removeClass('icon-expand').addClass('icon-contract');
        } else {
            document.webkitCancelFullScreen();
            $(this).removeClass('icon-contract').addClass('icon-expand');
        }
    };
    $upload.on('click', function() {
        $file.trigger('click');
    });

    $file.on('change', function(e) {
        fileChange(e);
    });

    function fileChange(e) {
        var file = e.target.files[0]
          , canPlayType = player.canPlayType(file.type);

        if (canPlayType === 'maybe' || canPlayType === 'probably') {
            src = window.URL.createObjectURL(file);
            player.src = src;
            $play.removeClass('icon-pause').addClass('icon-play');
            //新打开的视频处于paused状态
            player.onload = function() {
                window.URL.revokeObjectURL(src);
            }
            ;
        } else {
            alert("浏览器不支持您选择的文件格式");
        }
    }

    $player.on('timeupdate', timeupdate);
    //计算播放时间
    function timeupdate() {
        var time = player.currentTime.toFixed(1)
          , minutes = Math.floor((time / 60) % 60)
          , seconds = Math.floor(time % 60);

        if (seconds < 10) {
            seconds = '0' + seconds;
        }
        $timer.text(minutes + ':' + seconds);

        var w = $progressBar.width();
        if (player.duration) {
            var per = (player.currentTime / player.duration).toFixed(3);
            window.per = per;
        } else {
            per = 0;
        }
        $innerBar.css('width', (w * per).toFixed(0) + 'px');

        if (player.ended) {
            //播放完毕
            $play.removeClass('icon-pause').addClass('icon-play');
        }
    }

    $progressBar.on('click', function(e) {
        progressBarControl(e);
    });

    $volumeControl.on('click', function(e) {
        volumeControl(e);
    });

    //进度条控制
    function progressBarControl(e) {
        var w = $(this).width()
          , x = e.offsetX;
        window.per = (x / w).toFixed(3);
        //全局变量

        var duration = player.duration;
        player.currentTime = (duration * window.per).toFixed(0);

        $innerBar.css('width', x + 'px');
    }
    //声音条控制
    function volumeControl(e) {
        var w = $(this).width()
          , x = e.offsetX;
        window.vol = (x / w).toFixed(1);
        //全局变量

        player.volume = window.vol;
        $volumeInner.css('width', x + 'px');
    }
    ;//返回当前时间
    function currentTime(player) {
        console.log(player.currentTime);
    }

    $(document).on('webkitfullscreenchange', function(e) {
        var w = $progressBar.width()
          , w1 = $volumeControl.width();
        if (window.per) {
            $innerBar.css('width', (window.per * w).toFixed(0) + 'px');
        }
        if (window.vol) {
            $volumeInner.css('width', (window.vol * w1).toFixed(0) + 'px')
        }
    });

    }
}
)(jQuery)
